<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:58:04
 * @LastEditors: yuxi
 * @LastEditTime: 2023-03-11 20:31:05
-->
<template>
  <div class="map-container">
    <MiningMap :center="center" :zoom="zoom" :useContextMenu="true" :log="true">
      <MiningTiandituLayer
        layerName="基础底图"
        :ak="key"
        @ready="ready"
      ></MiningTiandituLayer>
      <MiningWFSLayer
        ref="WFSLayer"
        layerName="WFS图层"
        :url="url"
        :canModifyGeom="true"
        :featurePrefix="featurePrefix"
        :featureType="featureType"
        @submited="handleSumited"
        :fitExtent="true"
      ></MiningWFSLayer>
      <MiningLayerControl ref="layerControl">
        <template #layer="{ layer, layer_index, properties }">
          <MiningLayerControlItem :layer="layer">
            <template #addon>
              <div>
                <span
                  v-if="layer_index > 0 && !properties.isLock"
                  @click="$refs.WFSLayer.startDraw('MultiLineString')"
                  >添加</span
                >
                <span
                  style="margin-left: 5px"
                  v-if="layer_index > 0 && !properties.isLock"
                  @click="$refs.WFSLayer.submit()"
                  >保存</span
                >
              </div>
            </template>
          </MiningLayerControlItem>
        </template>
      </MiningLayerControl>
    </MiningMap>
  </div>
</template>

<script>
import MiningMap from 'mining-map/Map'
import MiningTiandituLayer from 'mining-map/Layers/TiandituLayer'
// import MiningWMSLayer from 'mining-map/Layers/WMSLayer'
import { TiandituKey } from '@/config/config.js'; 
import MiningWFSLayer from 'mining-map/Layers/WFSLayer.vue'
import MiningLayerControl from 'mining-map/Control/LayerControl';
import MiningLayerControlItem from 'mining-map/Control/LayerControlItem';

export default {
  name: 'WFSLayerDemo',
  title: 'WFSLayer',
  parentTitle: '图层',
  components: {
    MiningMap,
    MiningTiandituLayer,
    MiningWFSLayer,
    MiningLayerControl,
    MiningLayerControlItem
  },
  data () { 
    return {
      featurePrefix: 'topp',
      featureType: 'tasmania_roads',
      url: '/geoserver/wfs',
      version: '1.1.0',
      featureTypes: ['tasmania_roads'],
      center: [-103.76318963, 44.37493141],
      zoom: 14,
      key: TiandituKey
    }
  },
  methods: {
    ready ({map}) {
       
    },
    handleSumited (result) {
      console.log(result)
      let msg = []
      let {transactionSummary} = result
     
      if(transactionSummary.totalInserted) {
        msg.push(`新增要素：${transactionSummary.totalInserted}个`)
      }
      if(transactionSummary.totalUpdated) {
        msg.push(`更新要素：${transactionSummary.totalUpdated}个`)
      }
      if(transactionSummary.totalDeleted) {
        msg.push(`删除要素：${transactionSummary.totalDeleted}个`)
      }

      this.$notify({
          title: '成功',
          message: msg.join(','),
          type: 'success'
        });
    }
  }

}
</script>

<style>
body,
html {
  padding: 0;
  margin: 0;
}

.map-container {
  width: 100%;
  height: 100vh;
  text-align: left;
}
</style>